<template>
  <el-dialog style="border:1px solid" v-model="dialogVisibleLocal" :before-close="dialogclose" :close-on-click-modal="false"
    :show-close="false" :width="props.elwidth / 16 + 'rem'">
    <template #header>
      <div class="dialog-header">
        <div style="display:flex;justify-content: space-between; align-items: center;margin-bottom: 6px;">
          <div class="dialog-title">
            {{ props.headtext }}
          </div>
          <div style="cursor: pointer" @click="dialogclose">
            <img :src="getAssetsFile('components', 'cuowu')" />
          </div>
        </div>
        <div style="display:flex;justify-content: space-between; align-items: center;">
          <div class="dialog-xian"></div>
          <div class="dialog-xian2"></div>
          <div class="dialog-xian3"></div>
        </div>
      </div>
    </template>
    <div style="width: 100%;" :style="{ height: props.elheight / 16 + 'rem' }">
      <div class="dialog-body">
        <slot name="dialogbody"></slot>
      </div>
    </div>
    <!-- <slot name="dialogfoot">

   </slot> -->
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { getAssetsFile } from '@/utils/compnt.js'

const emits = defineEmits(['eddialogVisible'])

const props = defineProps({
  headtext: {
    type: String,
    default: ''
  },
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  elwidth: {
    type: Number,
    default: 746
  },
  elheight: {
    type: Number,
    default: 525
  },
})

// 本地 ref 变量，用于控制对话框显示状态
const dialogVisibleLocal = ref(props.dialogVisible)

// 监听 props.dialogVisible 的变化，同步到本地变量
watch(() => props.dialogVisible, (newVal) => {
  dialogVisibleLocal.value = newVal
})


const dialogclose = () => {
  dialogVisibleLocal.value = false
  emits('eddialogVisible', false)
}

onMounted(() => { })
</script>

<style lang="less" scoped>
.dialog-header {
  .dialog-title {
    width: 400px;
    height: 36px;
    -webkit-clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 0% 100%);
    padding-top: 9px;
    font-size: 16px;
    color: #fff;
    letter-spacing: 2px;
    display: flex;
  }

  .dialog-xian {
    width: 48px;
    height: 2px;
    background: #FFFFFF;
  }

  .dialog-xian2 {
    width: 100%;
    height: 2px;
    background: rgb(58, 78, 108)
  }

  .dialog-xian3 {
    width: 20px;
    height: 3px;
    background: #7ACAFF;
    -webkit-clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
  }
}

.dialog-body {
  color: #fff !important;
  font-size: 16px;
}

:deep(.el-dialog__title) {
  color: #fff !important;
}

// :deep(.el-dialog .el-dialog__body) {
//   color: #fff !important;
//   font-size: 16px;
// }

:deep(.el-dialog__header) {
  padding-top: 0;
  margin-top: 0px;
}
</style>